<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
</head>
<body>
<input type="" name="" value="青岛" class="inp1">
	<button class="btn1">查询a</button>
	<input type="" name="" value="上海" class="inp2">
	<button class="btn2">查询b</button>
	<div id="main" style="width:100%; height: 400px;"></div>
	<script type="text/javascript" src="./echarts.js"></script>
	<script type="text/javascript" src="../13AJAX/ajax.js"></script>
	<script type="text/javascript">
		let inp1 = document.querySelector(".inp1")
		let inp2 = document.querySelector(".inp2")
		let btn1 = document.querySelector('.btn1')
		let btn2 = document.querySelector('.btn2')
		var myChart = echarts.init(document.getElementById('main'));
		let option = {
				  title: {
				    text: '湿度对比'
				  },
				  tooltip: {
				    trigger: 'axis'
				  },
				  legend: {
				    data: [inp1.value, inp2.value]
				  },
				  grid: {
				    left: '3%',
				    right: '4%',
				    bottom: '3%',
				    containLabel: true
				  },
				  toolbox: {
				    feature: {
				      saveAsImage: {}
				    }
				  },
				  xAxis: {
				    type: 'category',
				    boundaryGap: false,
				    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
				  },
				  yAxis: {
				    type: 'value'
				  },
				  series: [
				    {
				      name: inp1.value,
				      type: 'line',
				      stack: 'Total',
				      data: [120, 132, 101, 134, 90, 230, 210]
				    },
				    {
				      name: inp2.value,
				      type: 'line',
				      stack: 'Total',
				      data: [220, 182, 191, 234, 290, 330, 310]
				    },
				  ]
				};
					myChart.setOption(option)
				btn1.onclick = function() {
					ajax({
					method: "get",
					url: "https://geoapi.qweather.com/v2/city/lookup",
					params: {
						location: inp1.value,
						key: "c494e264764449f7b4f6bf742276d7f9"
					},
					success: function(res) {
						console.log(res)
						waether(res.location[0].id, 1)
					}
				})
				}

				btn2.onclick = function() {
					ajax({
					method: "get",
					url: "https://geoapi.qweather.com/v2/city/lookup",
					params: {
						location: inp2.value,
						key: "c494e264764449f7b4f6bf742276d7f9"
					},
					success: function(res) {
						console.log(res)
						waether(res.location[0].id, 2)
					}
				})
				}

				function waether(id,cityIndex) {
				ajax({
					method: "get",
					url: "https://devapi.qweather.com/v7/weather/7d",
					params: {
						location: id,
						key: "c494e264764449f7b4f6bf742276d7f9"
					},
					success: function(res) {
						console.log(res)
						if (res.code == 200) {
							option.xAxis.data = []
							if (cityIndex == 1) {
								option.series[0].data = []
							}else{
								option.series[1].data = []
							}
							

							for (let i = 0; i < res.daily.length; i++) {
								option.xAxis.data.push(res.daily[i].fxDate)
								if (cityIndex == 1) {
									option.series[0].data.push(res.daily[i].humidity)
									option.series[0].name = inp1.value
									option.legend.data[0] = inp1.value
								}else{
									option.series[1].data.push(res.daily[i].humidity)
									option.series[1].name = inp2.value
									option.legend.data[1] = inp2.value
								}
								
							}
							//再去渲染
							myChart.setOption(option)
						}
					}
				})
			}
	</script>
</body>
</html>